<template>
	<page-meta page-style="height:100%">
	</page-meta>
	<view class="change-passwd-successful">
		<tabTopBar isOpenLeftSolt :title="$t('page.change.password.title')" bgColor="#131f34"></tabTopBar>
		<view class="content">
			<image class="illustration" src="/static/common/successful-illustration.png" mode="aspectFill"></image>
			<text class="tips">{{ $t('change.password.successful.tips') }}</text>
		</view>
		<view class="actions">
			<up-button class="btn" type="primary" size="large" shape="circle"
				@tap="$u.route({ url: '/pages/login/index', type: 'redirect' })">{{$t('change.password.successful.back.btn')}}</up-button>
			<safe-area-insets-bottom></safe-area-insets-bottom>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scope>
	.change-passwd-successful {
		height: 100%;
		@include flex(column);
		align-items: stretch;

		.content {
			flex: 1;
			padding-top: 120rpx;
			text-align: center;

			.illustration {
				display: block;
				width: 180rpx;
				height: 180rpx;
				margin: 0 auto 60rpx;
			}

			.tips {
				// font-family: Alibaba PuHuiTi 3.0;
				font-size: 32rpx;
				line-height: 40rpx;
				letter-spacing: 0.04em;
				white-space: pre-line;
				color: #DDDDDD;
			}
		}

		.actions {
			padding: 0 56rpx;

			.btn {
				margin-bottom: 60rpx;
			}
		}
	}
</style>
